<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="form.fa_id ? '编辑' : '添加'"
    v-model="visible"
    align-center
    width="600"
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="form"
      label-position="top"
      :label-width="140"
    >
      <el-form-item
        label="用户"
        class="w-full"
        prop="auth_user_id"
        :rules="[{ required: true, message: '不能为空', trigger: 'change' }]"
      >
        <VCascader
          v-model="form.auth_user_id"
          placeholder="用户"
          filterable
          clearable
          class="w-full"
        />
      </el-form-item>
      <el-form-item
        label="字段"
        class="w-full"
        prop="field_value"
        :rules="[{ required: true, message: '不能为空', trigger: 'change' }]"
      >
        <VSelect
          v-model="form.field_value"
          placeholder="请选择"
          disabled
          :options="options.field_value"
          clearable
          filterable
        />
      </el-form-item>
      <el-form-item
        label="可查看供应商"
        class="w-full"
        prop="relation_data"
        :rules="[
          { required: true, message: '不能为空', trigger: 'relation_data' },
        ]"
      >
        <VSelect
          v-model="form.relation_data"
          placeholder="供应商"
          type="supplier"
          multiple
          collapse-tags
          clearable
          filterable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose(false)">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { fieldAdd, fieldEdit, fieldDetail } from "../../api.js";
const props = defineProps({
  options: { type: Object, default: () => ({}) },
});
const emit = defineEmits(["close", "success"]);
const loading = ref(false);
const visible = ref(false);
const form = ref({ field_value: "supplier_cn_name" });
const open = async (fa_id) => {
  visible.value = true;
  // 编辑
  if (fa_id) {
    const { data } = await fieldDetail({ fa_id });
    let relation_data = data.relation_data.map((item) => item.relation_id);
    data.relation_data = relation_data;
    form.value = data;
  }
};

const formRef = ref();
const save = async () => {
  const validator = await formRef?.value?.validate();
  if (!validator) return ElMessage.warning("必填项不能为空!");
  try {
    loading.value = true;
    const { code, message } = await (form.value?.fa_id ? fieldEdit : fieldAdd)(
      form.value
    );
    ElMessage.success('操作成功!');
    handleClose(true);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
const handleClose = (refresh) => {
  visible.value = false;
  form.value = { field_value: "supplier_cn_name" };
  formRef?.value?.resetFields();
  emit("close");
  refresh && emit("success");
};
defineExpose({ open });
</script>
<style lang="scss" scoped></style>
